<!--
 * @Author: your name
 * @Date: 2022-04-20 09:18:49
 * @LastEditTime: 2022-05-07 16:17:57
 * @LastEditors: 血雪球 wash0226@outlook.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceabilitythree\components\input-farming.vue
-->
<!--
 * @Author: your name
 * @Date: 2022-04-13 10:28:09
 * @LastEditTime: 2022-04-15 10:34:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceabilitytwo\components\input-agricultural copy.vue
-->
<template>
  <el-card v-if="!yaogriStatus" id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>农事作业情况 AGRICULTURE OPERATION</span>
    </div>
    <div class="box-circle-item">
      <ul
        v-for="(percentitem, percentindex) in farmingtList"
        :key="percentindex"
      >
        <li>
          <span class="zh-lable">| 农事作业名称:</span>
          <el-input
            disabled
            align="center"
            :value="percentitem.agriculturalWorkTypeName"
          />
        </li>
        <li>
          <span class="zh-lable">| 作业人员:</span>
          <el-input disabled align="center" :value="percentitem.operator" />
        </li>
        <li v-if="percentitem.agriculturalMaterialName !== undefined">
          <span class="zh-lable">| 投入农资:</span>
          <el-input disabled align="center" :value="percentitem.agriculturalMaterialName" />
        </li>
        <li v-if="percentitem.investmentVolume !== undefined">
          <span class="zh-lable">| 总投入量:</span>
          <el-input disabled align="center" :value="percentitem.investmentVolume + '' + percentitem.unitName" />
        </li>
        <li v-if="percentitem.average !== undefined">
          <span class="zh-lable">| 亩均用量:</span>
          <el-input disabled align="center" :value="percentitem.average + '' + percentitem.unitName + '/' + percentitem.areaUnit" />
        </li>
        <li>
          <span class="zh-lable">| 作业时间:</span>
          <el-input disabled align="center" :value="percentitem.execEndTime" />
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
import graApi from "@/api/trace-source-web/production-api/index-primary.js";

export default {
  props: {
    batId: {
      type: [Number, String],
      default: () => ""
    },
    startTime: {
      type: [Number, String],
      default: () => ""
    },
    endTime: {
      type: [Number, String],
      default: () => ""
    }
  },
  data() {
    return {
      farmingtList: [],
      agriculpage: 1,
      pageSize: 10,
      percentTable: [],
      dialogAgrlFormVisible: false,
      loading: false,
      yaogriStatus: true,
      percenttabList: []
    };
  },
  watch: {
    startTime: {
      handler(val) {
        this.getagrisourcedata();
      }
    }
  },
  mounted() {
    this.batchNo = this.batId;
    this.databaseName = sessionStorage.databaseName;
    // setTimeout(() => {
    //   this.getagrisourcedata();
    // }, 200);
  },
  methods: {
    // 转换时间格式
    dateFormat(row, colnum) {
      if (row.assetDate) return this.$moment(row[colnum.property]).format("YYYY-MM-DD HH:mm:ss");
    },
    // 农事总数
    getagrisourcedata() {
      let nowbatchNo = this.batchNo;
      let params = {
        // "entity": {
        "batchNo": nowbatchNo,
        "endTime": this.endTime,
        "startTime": this.startTime
        // },
        // "page": 1,
        // "size": 1000
      };
      graApi.farmingminOperation(params).then(res => {
        let list = res.data;
        this.farmingtList = list;
        this.$emit('farmingnt', this.farmingtList)
        if (this.farmingtList.length > 0) {
          this.yaogriStatus = false
        } else {
          this.yaogriStatus = true
        }
      });
    }
    // // 农事详情
    // batcAgrlick(e) {
    //   this.loading = true
    //   let params = {
    //     batchNo: this.batchNo,
    //     agriculturalWorkTypeName: e,
    //     startTime: this.startTime,
    //     endTime: this.endTime
    //   };
    //   graApi.farmingminOperation(params).then(res => {
    //     let list = res.data;
    //     // console.log(list)
    //     this.percentTable = list
    //     this.loading = false
    //     // this.dialogAgrlFormVisible = true
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
#growing {
  // margin-bottom: 0;
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  .zh-lable {
    min-width: 105px;
  }
  ::v-deep .el-card__body {
    padding: 10px 10px;
    .box-circle-item {
      padding-left: 30px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      margin: 5px 0;
      // height: 50px;
      border-bottom: 1px dashed #01fde070;
      margin-bottom: 10px;
      &:last-child {
      border-bottom: 0px dashed #01fde070;
      margin-bottom: 0px;
      }
      // height: 50px;
      li {
        display: flex;
        list-style-type: none;
        margin: 0;
        width: 25%;
        // line-height: 50px;
        margin-bottom: 5px;
        align-items: center;
        .el-input {
          margin-left: 10px;
          width: 60%;
          ::v-deep .el-input__inner {
            border: 0;
            height: 32px;
            background-color: rgba($color: #0e4352, $alpha: 1);
            border-radius: 40px;
            text-align: center;
          }
        }
          .batclick {
            padding-left:  10px;
            width: 60%;
            .el-button {
              width: 100%;
              border-radius: 15px;
              height: 30px;
              line-height: 9px;
              background-color: #007795;
              color: #fffff0;
              border-color: #007795;
            }
            .el-button:hover {
              color: #01fde0;
              border-color: #01fde0;
            }
          }
      }
    }
  }
}

::v-deep .el-progress__text {
  white-space: pre;
}
</style>
